<template>
  <!-- 每日推荐 -->
  <div class="recommend-song">
    <div class="info mleft-30">
      <div class="img-wrap">
        <div class="day font-bold">{{ today }}</div>
      </div>
      <div class="text">
        <div class="font-24 font-bold">每日歌曲推荐</div>
        <div class="desc">根据你的音乐口味生成，每天6:00更新</div>
      </div>
    </div>
    <div class="btn-wrap mtop-15 mleft-30">
      <button class="btn btn-red">
        <svg class="icon cc"
             aria-hidden="true">
          <use xlink:href="#icon-shipinbofangshibofang"></use>
        </svg> 播放全部
      </button>
      <button class="btn btn-white ml-12">
        <i class="el-icon-folder-add"></i> 收藏全部
      </button>
    </div>
    <div class="div-line mtop-20 mleft-30"></div>
    <div class="songList">
      <ItemList :songlist="songlist"></ItemList>
    </div>
  </div>

</template>
<script>
import ItemList from '@/pages/HomeItem/ItemList'
import { getRePlaySongs } from '@/api/RankList'
export default {
  data () {
    return {
      today: 1,
      songlist: []
    }
  },
  components: { ItemList },
  created () {
    this.getRePlaySongs()
  },
  methods: {
    // 获取每日推荐歌曲
    async getRePlaySongs () {
      let res = await getRePlaySongs()
      if (res.code !== 200) return
      this.songlist = res.data.dailySongs
    }
  },
}
</script>

<style lang="less" scoped>
.recommend-song {
  .info {
    display: flex;
    margin-top: 25px;
  }
  .img-wrap {
    height: 90px;
    width: 100px;
    background: url("@/assets/img/calendar.png") no-repeat;
    background-size: 100px 90px;
    .day {
      width: 100px;
      height: 40px;
      font-size: 40px;
      color: #ec4141;
      margin-top: 30px;
      text-align: center;
    }
  }
  .text {
    padding-top: 20px;
    padding-left: 30px;
    .font-24 {
      font-size: 24px;
    }
    .font-bold {
      font-weight: bold;
    }
    .title {
      font-size: 24px;
    }
    .desc {
      font-size: 12px;
      color: #676767;
    }
  }
  .btn-wrap {
    i {
      font-size: 14px;
    }
  }
}
</style>